<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>逛水果店</title>
  <style>
    h3 {
      text-align: center;
    }

    table {
      margin: 0 auto;
      width: 500px;
      border: 2px solid black;
    }

    th {
      text-align: center;
      border: 2px solid black;
    }

    td {
      text-align: center;
      border: 2px solid black;
    }
  </style>
</head>

<body>
  <div id="app">
    <table class="tb">
      <tr>
        <th>欢迎光临_vue开发的收银系统_水果店</th>
      </tr>
      <tr>
        <td>苹果{{dan }}￥/斤，折扣（{{ zhe }}折）</td>
      </tr>
      <tr>
        <td>
          请输入您要购买的斤数 <input type="text" v-model.number="num" />
        </td>
      </tr>
      <tr>
        <td><button @click="getSum">结账买单</button></td>
      </tr>
      <tr>
        <td>
          结账单：总价: {{ sum }} ￥元；折后价: {{ self }} 元；省了: {{
          sheng
          }} ￥元；
        </td>
      </tr>
    </table>
  </div>
</body>
<script src="./js/vue-2.7.14.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data: {
      dan: 10,
      zhe: 0.8,
      num: 0,
      sum: 0,
      self: 0,
      sheng: 0
    },
    methods: {
      getSum() {
        this.sum = this.num * this.dan,
          this.self = (this.sum * this.zhe).toFixed(0)
        this.sheng = this.sum - this.self
      }
    }
  })
</script>

</html>